<template>
	<view
		class="bottom-box"
		@touchmove="handleTouchmove"
		@touchend="handleTouchend"
		:style="{ bottom: `${operationPanelBottomNum}px` }">
		<view class="bottom-content">
			<view v-if="type !== 'control'">
				<view class="bottom-span">
					<view class="dot-box">
						<up-avatar
							shape="square"
							size="24"
							src="/static/image/device/more.png"></up-avatar>
					</view>
					<view class="dot-box">
						<up-avatar
							shape="square"
							size="24"
							@click="goControl()"
							src="/static/image/device/control.png"></up-avatar>
					</view>
				</view>
				<view class="bottom-text">
					<up-text
						:text="t('more')"
						color="000000"
						size="12"></up-text>
					<up-text
						:text="t('control')"
						color="000000"
						size="12"></up-text>
				</view>
			</view>
			<view class="recall">
				<view class="card card-p">
					<view class="recall-box" v-if="isReadOnlyStatus">
						<view class="box-blue box-gray">
							<up-avatar
								shape="square"
								size="37"
								src="/static/image/device/recall.png"></up-avatar>
						</view>
						<up-text
							:text="
								deviceStore.deviceStatus?.status === 5
									? t('device.cancelRecall')
									: t('device.recall')
							"
							color="rgba(0, 0, 0, 0.9)"
							size="14"></up-text>
					</view>
					<view
						class="recall-box"
						v-else
						@click="
							isShowDialog(
								deviceStore.deviceStatus?.status === 5 ? 6 : 4
							)
						">
						<view class="box-blue">
							<up-avatar
								shape="square"
								size="37"
								src="/static/image/device/recall.png"></up-avatar>
						</view>
						<up-text
							:text="
								deviceStore.deviceStatus?.status === 5
									? t('device.cancelRecall')
									: t('device.recall')
							"
							color="rgba(0, 0, 0, 0.9)"
							size="14"></up-text>
					</view>
				</view>
				<view class="card card-p">
					<view class="recall-box" v-if="isReadOnlyStatus">
						<view class="box-blue box-gray">
							<up-avatar
								shape="square"
								size="37"
								src="/static/image/device/start.png"></up-avatar>
						</view>
						<up-text
							:text="t('device.start')"
							color="rgba(0, 0, 0, 0.9)"
							size="14"></up-text>
					</view>
					<view
						class="recall-box"
						v-else
						@click="changeCtrlPlans"
						@touchstart="ctrlPlansStart"
						@touchmove="ctrlPlansMove"
						@touchend="ctrlPlansChend">
						<view class="box-blue">
							<up-avatar
								shape="square"
								size="37"
								:src="`/static/image/device/${
									btnImageIs ? 'stops' : 'start'
								}.png`"></up-avatar>
						</view>
						<up-text
							:text="
								btnImageIs
									? t('device.stop')
									: t('device.start')
							"
							color="rgba(0, 0, 0, 0.9)"
							size="14"></up-text>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">
					<up-text
						:text="t('device.plan')"
						color="#333"
						size="12"></up-text>
					<up-text
						v-if="deviceStore.planList.length"
						class="text-right"
						:text="deviceStore.defaultPlan.plan_name"
						color="#999999"
						size="12"></up-text>
				</view>
				<scroll-view scroll-x="true" style="height: 40px">
					<view class="button-box" v-if="deviceStore.planList.length">
						<up-button
							v-for="(item, index) in deviceStore.planList"
							:key="index"
							:plain="true"
							shape="circle"
							:hoverStayTime="0"
							@click="setPlanDefault(item, index)"
							:class="
								deviceStore.defaultPlan.planid === item.planid
									? 'active-button'
									: ''
							"
							:text="item.plan_name"></up-button>
					</view>
				</scroll-view>
			</view>
			<view class="card">
				<view class="title">
					<up-text
						:text="t('device.cleaningMode')"
						color="#333"
						size="12"></up-text>
				</view>
				<up-row justify="space-around">
					<view v-for="(item, index) in modeList" :key="index">
						<view
							class="flex-fore"
							v-if="index === 0"
							@click="changeMode(item.key)">
							<view class="borders-box">
								<up-text
									align="center"
									text="auto"
									:color="
										item.key ===
										deviceStore.deviceStatus?.rubber
											? '#27b6f1'
											: 'rgba(0,0,0,0.9)'
									"
									size="12"></up-text>
							</view>
							<up-text
								align="center"
								:text="item.name"
								color="rgba(0,0,0,0.9)"
								size="12"></up-text>
						</view>
						<view
							class="flex-fore"
							v-else
							@click="changeMode(item.key)">
							<view class="borders-box">
								<up-avatar
									shape="square"
									size="32"
									:src="
										item.key ===
										deviceStore.deviceStatus?.rubber
											? item.activePic
											: item.pic
									"></up-avatar>
							</view>
							<up-text
								align="center"
								:text="item.name"
								color="rgba(0,0,0,0.9)"
								size="12"></up-text>
						</view>
					</view>
				</up-row>
			</view>
			<view class="card">
				<view class="title" style="justify-content: space-between">
					<up-text
						:text="t('device.shelter')"
						color="#333"
						size="12"></up-text>
					<up-button
						:plain="true"
						@click="goSelectStop"
						v-if="deviceStore.shopList.length"
						:text="t('device.goShelter')"></up-button>
				</view>
				<scroll-view scroll-x="true" height="40px">
					<view class="button-box" v-if="deviceStore.shopList.length">
						<up-button
							v-for="(item, index) in deviceStore.shopList"
							:key="index"
							:plain="true"
							shape="circle"
							:hoverStayTime="0"
							@click="changeCurrentShop(item)"
							:class="
								currentShop.id === item.id
									? 'active-button'
									: ''
							"
							:text="item.name"></up-button>
					</view>
					<up-text
						v-else
						:text="t('device.noData')"
						line-height="40"
						align="center"
						color="#999"
						size="14"></up-text>
				</scroll-view>
			</view>
		</view>
		<TipsModal
			v-if="showTip"
			type="blackTip"
			:isShowBorder="true"
			:contentText="equipText"
			@handleCancel="cancelTip"
			@handleConfirm="conformTip" />
		<TipsModal
			v-if="showDialog"
			type="greenTip"
			:title="t('notice')"
			:contentText="t('device.isContinueCleaning')"
			:cancelText="t('device.startOver')"
			:confirmText="t('device.continueCleaning')"
			@handleCancel="restartTip"
			@handleConfirm="continueTip" />
	</view>
</template>

<script setup lang="ts">
import {
	getCurrentInstance,
	ref,
	computed,
	reactive,
	onMounted,
	onUnmounted,
	watch,
} from "vue";
import {
	setDefaultPlansApi,
	deviceSetRuberApi,
	setRainShelterApi,
	cancelRecallV2Api,
	plansCtrlApi,
	deviceLocationApi,
	deviceResetApi,
	recallDeviceApi,
} from "@/service/index";
import { useI18n } from "vue-i18n";
import { useDeviceStore } from "@/stores/device";
import { useDevice } from "@/utils/device";
import TipsModal from "@/components/tipsModal/index.vue";
const isDialogNum = ref<number>(0);
const equipText = ref<string>("");
const deviceStore = useDeviceStore();
const { getPlanList } = useDevice();
const defaultDevice = useUniversalStorage("DefaultDevice", {});
const currentShop = ref({ data: [], id: "", name: "" });
const props = defineProps<{
	device_sn: string;
	type: string;
}>();

watch(
	() => [
		deviceStore.defaultPlan,
		deviceStore.planList,
		deviceStore.deviceStatus,
		deviceStore.shopList,
	],
	() => {},
	{ immediate: true, deep: true }
);

const bottomNumNo = ref(-260);
const operationPanelBottomNum = ref<number>(-260);
const timeoutTouch = ref<NodeJS.Timeout | null>(null);
const { locale, t } = useI18n();
const instance: any = getCurrentInstance();
const moveNumY = ref<number | null>(null);
const gapValue = ref("12px");
const modeList = ref([
	{
		name: t("device.rubber.huge"),
		key: "huge",
		pic: "",
		activePic: "",
	},
	{
		name: t("device.rubber.small"),
		key: "small",
		pic: "/static/image/device/small.png",
		activePic: "/static/image/device/small_active.png",
	},
	{
		name: t("device.rubber.median"),
		key: "median",
		pic: "/static/image/device/median.png",
		activePic: "/static/image/device/median_active.png",
	},
	{
		name: t("device.rubber.big"),
		key: "big",
		pic: "/static/image/device/big.png",
		activePic: "/static/image/device/big_active.png",
	},
]);
onMounted(() => {
	if (props.type == "control") {
		operationPanelBottomNum.value = 15;
		gapValue.value = "20px";
	}
});
const showTip = ref(false);
const showDialog = ref(false);
const cancelTip = () => {
	showTip.value = false;
};
const restartTip = () => {
	plansCtrl(1, "startPlan");
	showDialog.value = false;
};
const continueTip = () => {
	plansCtrl(4, "continuePlan");
	showDialog.value = false;
};
// 命令类型枚举
enum ControlCommand {
	START = 1, // 开始
	STOP = 2, // 终止
	PAUSE = 3, // 暂停
	RESUME = 4, // 恢复
	RECALL = 5, // 召回
	CANCEL_RECALL = 6, // 召回取消
	CONTINUE = 7, // 继续清扫
}

// Dialog 类型枚举
enum DialogType {
	STOP_TASK = 1, // 结束任务
	OPEN_POSITION = 2, // 开启定位
	REPOSITION = 3, // 重新定位
	RECALL_VEHICLE = 4, // 召回车辆
}
interface PlanCtrlParams {
	device_sn: string;
	plan_id: string;
	cmd: number;
	map_id?: string;
}
interface ApiResponse {
	code: number;
	msg?: string;
	data?: any;
}
// 设备状态枚举
enum DeviceState {
	IDLE = 1, // 空闲中
	CLEANING = 2, // 清扫中
	PAUSED = 3, // 任务暂停中
	CHARGING = 4, // 充电中
	RECALLING = 5, // 召回中
	FAULT = 6, // 故障中
	UPDATING = 7, // 升级维护中
	PLANNING = 8, // 任务规划中
	DEPARTING = 9, // 出航
	RETURNING = 10, // 返航
	TRANSITION = 11, // 过渡中
	AVOIDING = 12, // 绕障
	DOCKING = 13, // 回充
	EMERGENCY_STOP = 14, // 急停保护
	MANUAL = 15, // 手动遥控
	ENTERING = 16, // 入仓
	EXITING = 17, // 出仓
}
const isTimeTimingOk = ref<boolean>(false);
// 设置默认清洁任务并执行
const setPlanIdRun = async (): Promise<void> => {
	try {
		const planId = deviceStore.defaultPlan?.planid;
		// 查找匹配的计划
		const matchedPlan: Plan = deviceStore.planList.find(
			(item) => item.planid === planId
		);

		if (matchedPlan) {
			deviceStore.defaultPlan = matchedPlan;
			await setDefaultPlans(matchedPlan);
			await plansCtrl(ControlCommand.START, "startPlan");
		} else {
			showWarningMessage(t("errors.planNotFound"));
		}
	} catch (error) {
		showWarningMessage(t("errors.setPlanFailed"));
	}
};
// 处理终止命令
const handleStopCommand = async (waitbegin: boolean): Promise<void> => {
	if (isTimeTimingOk.value) {
		isTimeTimingOk.value = false;
		await setPlanIdRun();
	}

	if (waitbegin) {
		await plansCtrl(ControlCommand.START, "startPlan");
	}
};
const successFunTip = (msg: string) => {
	instance?.proxy.$message(msg, "success");
};
// 清洁计划控制
const plansCtrl = async (
	cmd: ControlCommand,
	tips: string,
	waitbegin: boolean = false
): Promise<void> => {
	try {
		const params: PlanCtrlParams = {
			device_sn: props.device_sn,
			plan_id: deviceStore.defaultPlan?.planid,
			cmd,
			map_id: deviceStore.defaultPlan?.map_id,
		};
		const { data } = await plansCtrlApi(params);
		if (data.code === 0) {
			successFunTip(t(`tips.${tips}`));
			// 终止命令的特殊处理
			if (cmd === ControlCommand.STOP) {
				await handleStopCommand(waitbegin);
			}
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		showWarningMessage(error?.msg);
	}
};
// 设备定位控制
const deviceLocation = async (isEnable: boolean): Promise<void> => {
	try {
		const isReset =
			deviceStore.deviceStatus?.location_status !== 1 && isEnable;

		let data: ApiResponse;
		if (!isReset) {
			data = await deviceLocationApi({
				device_sn: props.device_sn,
				action: isEnable,
			});
		} else {
			data = await deviceResetApi({
				device_sn: props.device_sn,
				action: isEnable,
			});
		}

		const tipKey = isReset
			? "device.relocation"
			: isEnable
			? "device.positioning"
			: "device.closingLocation";

		if (data.code === 0) {
			successFunTip(`${t(tipKey)} ${t("submission")}`);
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		showWarningMessage(error?.msg);
	}
};
// 召回设备
const recallDevice = async (): Promise<void> => {
	try {
		const { data }: { data: ApiResponse } = await recallDeviceApi({
			device_sn: props.device_sn,
		});
		if (data.code === 0) {
			successFunTip(t("device.info.recallOk"));
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		showWarningMessage(error?.msg);
	}
};
// 弹窗确认处理
const conformTip = async (): Promise<void> => {
	const handlers: Record<DialogType, () => Promise<void>> = {
		[DialogType.STOP_TASK]: () => plansCtrl(ControlCommand.STOP, "stop"),
		[DialogType.OPEN_POSITION]: () => deviceLocation(true),
		[DialogType.REPOSITION]: () => deviceLocation(true),
		[DialogType.RECALL_VEHICLE]: recallDevice,
	};

	const handler = handlers[isDialogNum.value];
	if (handler) {
		await handler();
	} else {
		console.warn("未知的弹窗类型:", isDialogNum.value);
	}
	showTip.value = false;
};
// 长按清洁计划控制
const ctrlPlansStart = (): void => {
	// 清除可能存在的旧定时器
	if (timeoutTouch.value) {
		clearTimeout(timeoutTouch.value);
		timeoutTouch.value = null;
	}

	// 设置新的定时器
	timeoutTouch.value = setTimeout(() => {
		isShowDialog(1); // 显示确认弹窗
	}, 1000); // 定义长按1S为长按事件
};

const ctrlPlansMove = (): void => {
	// 移动时清除长按定时器
	if (timeoutTouch.value) {
		clearTimeout(timeoutTouch.value);
		timeoutTouch.value = null;
	}
};

const ctrlPlansChend = (): void => {
	// 触摸结束时清除长按定时器
	if (timeoutTouch.value) {
		clearTimeout(timeoutTouch.value);
		timeoutTouch.value = null;
	}
};
// 点击操作按钮 开始/暂停
const changeCtrlPlans = async (): Promise<void> => {
	try {
		// 检查是否有默认计划
		if (!deviceStore.defaultPlan?.planid) {
			showWarningMessage(t("device.noPlans"));
			return;
		}

		const currentStatus = deviceStore.deviceStatus?.status;
		const planStatus = deviceStore.deviceStatus?.plan_status;

		// 需要暂停的状态列表
		const shouldPauseStates = [
			DeviceState.CLEANING,
			DeviceState.RECALLING,
			DeviceState.DEPARTING,
			DeviceState.RETURNING,
			DeviceState.TRANSITION,
			DeviceState.AVOIDING,
			DeviceState.DOCKING,
		];

		if (shouldPauseStates.includes(currentStatus)) {
			// 设备正在运行中，执行暂停
			await plansCtrl(ControlCommand.PAUSE, "suspend");
		} else if (currentStatus === DeviceState.PAUSED) {
			// 设备已暂停
			if (planStatus === "undone") {
				// 打开选择对话框：重新开始/继续任务
				showDialog.value = true;
			} else {
				// 继续任务
				await plansCtrl(ControlCommand.RESUME, "continuePlan");
			}
		} else {
			// 其他状态处理
			if (
				[
					DeviceState.PAUSED,
					DeviceState.CHARGING,
					DeviceState.MANUAL,
				].includes(currentStatus)
			) {
				if (planStatus === "undone") {
					// 打开选择对话框：重新开始/继续任务
					showDialog.value = true;
				} else {
					// 开始新任务
					await plansCtrl(ControlCommand.START, "startPlan");
				}
			} else {
				// 默认开始新任务
				await plansCtrl(ControlCommand.START, "startPlan");
			}
		}
	} catch (error) {
		showWarningMessage(error?.msg);
	}
};
const isShowDialog = (dialogNum: number): void => {
	isDialogNum.value = dialogNum;
	switch (dialogNum) {
		case 1:
			equipText.value = t("device.confirm.endTask");
			break;

		case 2:
			equipText.value = t("device.confirm.openPosition");
			break;

		case 3:
			equipText.value = t("device.confirm.reposition");
			break;
		case 4:
			handleRecallVehicle();
			return; // 特殊处理，直接返回不打开弹窗

		case 6:
			cancelRecallV2();
			return; // 特殊处理，直接返回不打开弹窗

		default:
			console.warn("Unknown dialog number:", dialogNum);
			return;
	}
	showTip.value = true;
};

// 处理召回车辆的特殊逻辑
const handleRecallVehicle = (): void => {
	const status = deviceStore.deviceStatus?.status;
	if (status === 4) {
		showWarningMessage(t("alert.error1"));
		return;
	}
	if (status === 9) {
		showWarningMessage(t("alert.error2"));
		return;
	}
	equipText.value = t("device.confirm.recallVehicle");
	showTip.value = true;
};

// 取消召回方法
const cancelRecallV2 = async (): Promise<void> => {
	try {
		const params = {
			device_sn: props.device_sn,
		};
		const { data } = await cancelRecallV2Api(params);

		if (data.code === 0) {
			successFunTip(t("tips.norecallSuccess"));
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		console.error("取消召回失败:", error);
		showWarningMessage(t("networkError"));
	}
};
// 计算属性：判断是否只读状态（不响应操作）
const isReadOnlyStatus = computed(() => {
	const status = deviceStore.deviceStatus?.status;
	const connStatus = deviceStore.deviceStatus?.conn_status;
	return [7, 14, 15, 16, 17].includes(status) || connStatus === 2;
});

// 计算属性：动态按钮图片名称
const btnImageIs = computed(() => {
	const status = deviceStore.deviceStatus?.status;
	return [2, 5, 9, 10, 11, 12, 13].includes(status);
});
const goControl = () => {
	uni.navigateTo({
		url: `/pages/device/components/ControlPane?device_sn=${props.device_sn}`,
	});
};
const setBottom = () => {
	if (defaultDevice.value?.model_id === "YZYH") {
		bottomNumNo.value = -150;
		operationPanelBottomNum.value = -150;
	} else {
		bottomNumNo.value = -50;
	}
};
const handleTouchmove = (e: TouchEvent) => {
	if (props.type == "control") return;
	e.preventDefault();
	const touches = e.touches;
	// 单指拖动
	if (touches.length === 1) {
		const currentY = touches[0].clientY;
		if (!moveNumY.value) {
			moveNumY.value = currentY;
			return;
		}
		const gapY = currentY - moveNumY.value;
		if (gapY > 100) {
			operationPanelBottomNum.value = bottomNumNo.value;
		} else if (gapY < -100) {
			operationPanelBottomNum.value = 10;
		} else {
			if (gapY > 0 && gapY < 100) {
				if (operationPanelBottomNum.value <= bottomNumNo.value) return;
				operationPanelBottomNum.value -= 5;
			} else if (gapY < 0 && gapY > -100) {
				if (operationPanelBottomNum.value >= 10) return;
				operationPanelBottomNum.value += 5;
			}
		}
	}
};
// 设置默认计划
const setDefaultPlans = async (plan: Plan): Promise<void> => {
	try {
		const { data } = await setDefaultPlansApi({
			device_sn: props.device_sn,
			planid: plan.planid,
		});

		if (data.code === 0) {
			await getPlanList(props.device_sn);
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		showWarningMessage(t("networkError"));
	}
};
interface DeviceSetRubberParams {
	device_sn: string;
	rubtype: string;
}
//设置挡板模式
const changeMode = async (key: string) => {
	const params: DeviceSetRubberParams = {
		device_sn: props.device_sn,
		rubtype: key,
	};
	const { data } = await deviceSetRuberApi(params);
	if (data.code === 0) {
		successFunTip(t("settingOk"));
	} else {
		instance?.proxy.$message(data.msg, "error");
	}
};
// 选择清洁计划
const setPlanDefault = async (device: Device, index: number) => {
	if (!isDeviceAvailable(deviceStore.deviceStatus?.status)) {
		showWarningMessage(t("device.workingNow"));
		return;
	}

	if (device.status === 3) {
		showWarningMessage(t("device.NoPlansOk"));
	} else {
		await setDefaultPlans(device);
	}
};
const changeCurrentShop = (item: any) => {
	currentShop.value = item;
};
const goSelectStop = async (): Promise<void> => {
	try {
		if (!currentShop.value.id) {
			showWarningMessage(t("device.chooseShelterFirst"));
			return;
		}
		const stopInfo = currentShop.value;
		const params = {
			device_sn: props.device_sn,
			semantics_id: stopInfo.id,
		};
		const { data } = await setRainShelterApi(params);

		if (data.code === 0) {
			successFunTip(t("settingOk"));
		} else {
			showWarningMessage(data.msg);
		}
	} catch (error) {
		console.error("设置雨棚失败:", error);
	}
};
// 显示警告消息
const showWarningMessage = (key: string) => {
	instance?.proxy.$message(key, "warning");
};
// 检查设备是否可用
const isDeviceAvailable = (status: number): boolean => {
	return [1, 4, 7].includes(status);
};
const handleTouchend = () => {
	if (props.type == "control") return;
	moveNumY.value = null;
	document.removeEventListener("touchmove", preventDefault, false);
};
const preventDefault = (e: Event) => {
	e.preventDefault();
};
let touchMoveHandler: ((e: Event) => void) | null = null;
// 组件挂载时添加监听
const setupListeners = () => {
	touchMoveHandler = preventDefault;
	document.addEventListener("touchmove", touchMoveHandler, {
		passive: false,
	});
};

// 组件卸载时清理
const cleanupListeners = () => {
	if (touchMoveHandler) {
		document.removeEventListener("touchmove", touchMoveHandler);
	}
};
defineExpose({
	setupListeners,
	cleanupListeners,
	setBottom,
});
</script>

<style lang="scss" scoped>
.bottom-box {
	position: fixed;
	width: 100vw;
	padding: 0 30rpx;
	box-sizing: border-box;
	overflow: visible;
	.bottom-content {
		display: flex;
		gap: v-bind(gapValue);
		flex-direction: column;
		.bottom-span {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			padding: 0 15px;
		}
		.dot-box {
			background: #fff;
			border-radius: 33px;
			height: 33px;
			width: 33px;
			margin-bottom: 3px;
			transition: margin-bottom 0.5s;
			box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.16);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}
		.bottom-text {
			display: flex;
			justify-content: space-between;
			padding: 0 15px;
			:deep(.u-text:last-child) {
				justify-content: flex-end !important;
			}
			:deep(.u-text__value) {
				width: 33px;
				justify-content: center;
			}
		}
		.recall {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			width: 100%;
		}
		.recall-box {
			align-items: center;
			justify-content: center;
			display: flex;
			flex: 1;
			gap: 20rpx;
			.box-blue {
				width: 37px;
				height: 37px;
				border-radius: 37px;
				background: #27b6f1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.box-gray {
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
				-webkit-filter: grayscale(1);
			}
			:deep(.u-text) {
				width: fit-content !important;
				flex: 0 1 auto !important;
			}
		}

		.card {
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
			flex: 1;
			.title {
				display: flex;
				align-items: center;
				:deep(.u-text) {
					width: fit-content !important;
					flex: 0 1 auto !important;
				}
				:deep(.u-button) {
					padding: 3px 10px;
					border: 1px solid #007aff;
					border-radius: 4px;
					color: #007aff;
					font-size: 12px !important;
					margin: 0;
				}
			}
			.text-right {
				border-left: 1px solid #e0e0e0;
				padding: 0 5px;
				margin-left: 5px !important;
				line-height: 10px;
				height: 10px;
			}
			.button-box {
				display: flex;
				width: 100%;
				gap: 10px;
				padding: 5px 5px 0;
				justify-content: flex-start !important;
				& > * {
					flex: 0 0 auto !important; /* 明确指定不伸缩 */
					min-width: 0;
				}
			}
			.button-box:not(.other-class) {
				justify-content: flex-start !important;
			}
			:deep(.u-button) {
				padding: 9px 36px;
				height: auto;
				border-color: #e0e0e0;
				color: #333;
				flex: none !important; // 强制覆盖
				width: max-content !important;
				margin: 0;
			}
			.active-button {
				background: rgba(142, 185, 236, 0.22);
				color: #27b6f1;
				border-color: #27b6f1;
			}
			:deep(.u-button--circle) {
				border-radius: 17px;
			}
			.borders-box {
				width: 36px;
				height: 36px;
				border: 1px solid #999999;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.flex-fore {
				display: flex;
				flex: 1/4;
				justify-content: center;
				flex-direction: column;
				margin-top: 10px;
				gap: 8px;
			}
		}
		.card-p {
			padding: 26rpx !important;
		}
	}
}
</style>
